/* eslint-disable */

import $ from "jquery";
import Vue from "vue";

import EditorDefaultConfig from "@/config/editorDefaultConfig.js";

import AmbientLight from "@/components/light/ambientLight.vue";
import DirectionalLight from "@/components/light/directionalLight.vue";
import PointLight from "@/components/light/pointLight.vue";
import SpotLight from "@/components/light/spotLight.vue";
import HemisphereLight from "@/components/light/hemisphereLight.vue";
import RectAreaLight from "@/components/light/rectAreaLight.vue";
import PerspectiveCamera from "@/components/camera/perspectiveCamera.vue";
import Model from "@/components/model/model.vue";
import Material from "@/components/material/material.vue";
import Textures from "@/components/textures/texturesCmp.vue";
import WtText from "@/components/widgets/wtTextCmp.vue";
import Mesh from "@/components/mesh/mesh.vue";

import BaseUtil from "@/utils/baseUtil.js";

export default {

    components: {
        AmbientLight,
        DirectionalLight,
        PointLight,
        SpotLight,
        HemisphereLight,
        RectAreaLight,
        PerspectiveCamera,
        Model,
        Material,
        Textures,
        WtText,
        Mesh,
    },

    data () {
        return {
            editorDefaultConfig: EditorDefaultConfig,

            editorServerConfig: Vue.prototype.baseConfig,

            childIndex: 0,

            singleParent: "",    // some single page data parent name

            singleKey: -1,     // some single page data key

            editorMaterial: {material: null},

            intensityId: "",

            isMeshMsg: false,

            editorMesh: null,

            geoName: "",
        }
    },

    mounted () {

        const _this = this;

        this.$root.$on("editorDataChanged", _this.reloadData);

    },

    methods: {

        slideToggle (e, className) {
            let target = e.target;

            if (!$(target).hasClass(className)) {
                target = $(target).parent("." + className);
            }

            $(target).toggleClass("editorTitleActive");
            $(target).siblings().eq(0).slideToggle(200);

        },

        reloadData (data) {

            this.editorServerConfig = Vue.prototype.baseConfig;
            this.isMeshMsg = false;
            this.editorMaterial.material = null;

            if (data instanceof Object) {

                this.singleParent = data.singleParent;
                this.singleKey = data.singleKey;

                if (data.singleParent === "textures") {

                    this.$forceUpdate();

                    this.$nextTick(() => {
                        $(".editorPickContainer .textures").show();
                    });
                } else if (data.singleParent === "text") {

                    this.$forceUpdate();

                    this.$nextTick(() => {
                        $(".editorPickContainer .wtText").show();
                    });

                } else if (data.singleParent === "geo") {

                    this.$forceUpdate();

                    this.$nextTick(() => {
                        $(".editorPickContainer .geoInfo").show();
                    });

                } else if (data.isMesh) {

                    this.isMeshMsg = true;

                    const model = Vue.prototype.baseConfig['model'][this.singleParent];

                    this.editorMesh = this.isMesh(model.children)[this.singleKey];

                    if (!this.editorMesh) {
                        this.isMeshMsg = false;
                        return;
                    }

                    this.intensityId = this.singleParent + this.singleKey + Date.now();

                    this.$forceUpdate();

                }  else if (data.isMaterial) {

                    this.intensityId = this.singleParent + this.singleKey + Date.now();

                    this.$forceUpdate();

                    this.$nextTick(() => {

                        this.editorMaterial.material = this.editorServerConfig.material[this.singleParent][this.singleKey];

                    });

                } else if (data.singleParent === "model") {
                    this.intensityId = this.singleParent + this.singleKey + Date.now();
                }
               
            }

            this.$forceUpdate();

        },

        addLight (lightType) {

            if (!this.editorServerConfig) {
                this.editorServerConfig = [];
            }

            if (!this.editorServerConfig.light) {
                this.editorServerConfig.light = {};
            }

            if (!this.editorServerConfig.light.hasOwnProperty(lightType)) {
                this.editorServerConfig.light[lightType] = [];
            }

            const lastIndex = this.editorServerConfig.light[lightType].length;

            // eslint-disable-next-line
            this.editorServerConfig.light[lightType][lastIndex] = Editor.addLight(lightType, lastIndex+1);

            // 重新渲染当前组件视图
            this.$forceUpdate();

            // 通知其他组件重新渲染视图
            this.$root.$emit("outLineDataChanged");
        },

        renameModel (e) {
            $(e.target).siblings().removeAttr("disabled");
            $(e.target).siblings().focus();
        },

        renameModelInput (e) {

            if (e.keyCode === 13) {

                $(e.target).attr("disabled", "disabled");

                const name = $.trim($(e.target).val());

                if (name) {

                    const scene = Halo.Config.scene();

                    Editor.rename("mdl", this.singleKey, name);

                    Editor.save("scn", scene.name, scene);
                }
            }

        },

        isMesh: (childArray) => childArray.filter(item => item.type === "Mesh"),

        deleteGeo (target) {

            Editor.remove("geo", target);

            this.$root.$emit("outLineDataChanged");

            this.reloadData();
        },

        renameGeoInput (e) {

            if (e.keyCode === 13) {

                $(e.target).attr("disabled", "disabled");

                this.geoName = $.trim($(e.target).val());

                Editor.rename("geo", this.editorServerConfig.geo[this.singleKey].name, this.geoName);

                const modelSet = BaseUtil.getUsedModelSet("geo", this.geoName, Vue.prototype.baseConfig.model);

                if (modelSet.length > 0) {
                    BaseUtil.setUsedModel("geo", this.editorServerConfig.geo[this.geoName], modelSet);
                }

                this.geoName = "";

                this.$root.$emit("outLineDataChanged");
            }
        },

        renameGeo (e) {

            $(e.target).siblings().find("input").removeAttr("disabled");
            $(e.target).siblings().find("input").focus();
        }
    }
}